@import '~@huxy/styles/lib/common.less';
@import '~@common/layout/frame/config.less';

.loop-tree(@pl,@size,@level:1) when (@level < 6){
  >li{
    >a{
      padding-left:@pl;
      // background:linear-gradient(to bottom,lighten(@bgcolor,1),@bgcolor);
      // background:linear-gradient(to bottom,@menuBgColor,hsla(0,0%,0%,.01));
      font-size:@size;
      /*>i{
        font-size:@size;
      }*/
    }
    >ul{
      background-color:hsla(0,0%,0%,.03);
      box-shadow:0 1px 4px rgba(0,0,0,0.08) inset;
      // .loop-tree(darken(@bgcolor,8),(@pl + 20),(@size - 4),(@level + 1));
      .loop-tree((@pl + 15),(@size - 0.2),(@level + 1));
    }
  }
  // background-color:hsla(0,0%,0%,.12);
  // background-color:@bgcolor;
}

@menuItemHeight:45px;
@subMenuItemHeight:40px;
@menuIconWidth:38px;
@menuDownBar:0px;

.menu{
  background-color:@menuBgColor;
  height:100%;
  position:relative;
  .tree-root{
    height:calc(100% - @menuDownBar);
    overflow:auto;
    padding:10px 0;
    .loop-tree(10px,1.5rem);
    >li{
      >a{
        background:linear-gradient(to bottom,hsla(0,0%,0%,0),@deepMenuBgColor);
      }
      li{
        // height:@subMenuItemHeight;
        a{
          height:@subMenuItemHeight;
          line-height:@subMenuItemHeight;
          i,.anticon{
            height:@subMenuItemHeight;
            line-height:@subMenuItemHeight;
          }
        }
      }
    }
    li{
      user-select:none;
      &[has-children="true"]{
        >a{
          &.active{
            &::after{
              display:none;
            }
          }
        }
      }
      >a{
        .follow-vertical();
        position:relative;
        display:block;
        height:@menuItemHeight;
        line-height:@menuItemHeight;
        text-decoration:none;
        // border-bottom:1px solid #888;
        // color:#666;
        // font-size:16px;
        transition:.2s color;
        &.open{
          color:#3498db;//@linkActiveColor;
        }
        &.active{
          background-color:hsla(0,0%,0%,.02);
          // background-color:#435466;
          // color:@linkActiveColor;

          /*background-color: rgba(240, 249, 249, 0.1);
          border: 1px solid #90bade;
          border-left: 0;
          &::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            width: 4px;
            background-color: #3a8bca;
          }
          &::after {
            content: '';
            position: absolute;
            left: 4px;
            top: 0;
            height: 100%;
            width: 4px;
            background: rgba(75, 147, 206, 0.19);
          }*/
          /*&:has(+ul){
            &::after{
              display:none;
            }
          }*/
        }
        &:hover{
          // background-color:hsla(0,0%,0%,.04);
          // background-color:#435466;
          color:@linkHoverColor;
        }
        i,.anticon{
          display:block;
          position:absolute;
          top:0;
          width:@menuIconWidth;
          height:@menuItemHeight;
          line-height:@menuItemHeight;
          text-align:center;
          // font-size:20px;
          +span{
            padding-left:@menuIconWidth;
          }
        }
        span{
          display:block;
          padding:0 10px;
          overflow:hidden;
          text-overflow:ellipsis;
          white-space:nowrap;
          &.has-right-icon{
            padding-right:30px;
          }
          +i{
            right:0;
            width:28px;
          }
        }
      }
      /*>ul{
        // display:none;
        // padding:8px 0;
        max-height:0;
        overflow:hidden;
        &.open{
          animation:ani-fade-in .3s ease-in forwards;
        }
      }*/
      >ul{
        overflow:hidden;
        max-height:var(--ul-max-height);
        transition:max-height .3s;
      }
    }
  }
}

@keyframes ani-fade-in{
  0% {
    max-height: 0;
  }
  99% {
    max-height:50em;//100%
  }
  100% {
    max-height:none;
  }
}


















